export default `
<div>

	<div>
		<span style="font-size: 25px;">控件属性</span>
	</div>
<div>
<form name="widgets" style="margin: 20px 0 20px 0;">
	<span style="margin-right: 20px;">
		<input type="checkbox" value="dots" name="dots" ></input>
		<label>是否显示结点左边的虚线<label>
	</span>
	<span style="margin-right: 20px;">
		<input type="checkbox" value="checkbox" name="checkbox"></input>
		<label>是否显示复选框<label>
	</span>
	<span style="margin-right: 20px;">
		<input type="checkbox" value="disable_undetermined_state" name="disable_undetermined_state"></input>
		<label>是否禁用三态复选框<label>
	</span>
	<span style="margin-right: 20px;">
		<input type="checkbox" value="state" name="state"></input>
		<label>是否保存状态<label>
	</span>

	<div style="margin-top: 10px;">
		<span>
			<label>提供的数据中可以作为id的字段名,该字段用来标识每一个树结点：</label>
			<input type="text" name="id-field" style="width: 300px;"></input>
		</span>
	</div>
	<div style="margin-top: 10px;">
		<span>
			<label>提供的数据中可以作为pid的字段名，该字段用来标识该结点的父结点：</label>
			<input type="text" name="pid-field" style="width: 300px;"></input>
		</span>
	</div>
	<div style="margin-top: 10px;">
		<span>
			<label>提供的数据中可以作为text的字段名，该字段用来在树结点上显示：</label>
			<input type="text" name="text-field" style="width: 300px;"></input>
		</span>
	</div>
	<div style="margin-top: 10px;">
		<span>
			<label>提供的数据中可以作为title的字段名，该字段用来在树结点上标示title属性，鼠标在上面的时候弹出提示信息，当需要显示更多内容的时候有用：</label>
			<input type="text" name="title-field" style="width: 300px;"></input>
		</span>
	</div>
	<div style="margin-top: 10px;">
		<span>
			<label>提供一个图片地址，用来替换默认图标显示,如果未定义属性值或属性值为字符串，则使用默认图标显示：</label>
			<input type="text" name="icon" style="width: 300px;"></input>
		</span>
	</div>
	<div style="margin-top: 10px;">
		<span>
			<label>提供的数据中可以作为icon的字段名，该字段用来在树结点上显示图标。默认值为icon。只有设置了icon属性时起使用：</label>
			<input type="text" name="icon-field"  style="width: 300px;"></input>
		</span>
	</div>
	<div style="margin-top: 10px;">
		<span>
			<label>必要属性，必须为一个数组，并且至少有三个字段(id、pid、text)：</label>
			<input type="text" name="data"  style="width: 600px;" value='[{"id":1,"pid":"root","text":"1", "title":"ddddddddddd"},{"id":2,"pid":"0","text":"2"},{"id":"11","pid":"1","text":"444"},{"id":"12","pid":"1","text":"12"},{"id":"111","pid":"11","text":"111", "no_checkbox": true},{"id":"112","pid":"11","text":"112", "no_checkbox": true},{"id":"211","pid":"2","text":"211", "no_checkbox": true}]'></input>
		</span>
	</div>
	<input type="button" value="预览" style="width: 200px;height: 40px;" data-feidao-actions="click:eu-014" />
</form>
</div>

<div data-feidao-actions="fdwe-tree-select-node:eu-002,fdwe-tree-activate-node:eu-003" data-feidao-presentation="p02" style="width:500px;height:260px;display:inline-block;"></div>

<textarea data-feidao-id="fd-w000001-002" cols=60 rows=10 style="float:left;"></textarea>

<div>
按钮的响应为调用控件方法
<textarea data-feidao-id="fd-w000001-005" cols=80 rows=15 style="float:right;margin-right:200px;"></textarea>
	<table style="margin: 20px 0 20px 0;text-align: center;width: 800px;">
		<thead>
			<td>按钮名称</td>
			<td>控件方法</td>
			<td>备注</td>
			<td>调用方法</td>
		</thead>
		<tbody>
			<tr>
				<td>搜索</td>
				<td>search</td>
				<td></td>
				<td>
					<input type="text" style="width: 100px;" style="margin:10px;" placeholder="搜索内容" data-feidao-id="seach-id">
					<input type="button" style="width: 200px;" value="搜索" style="margin:10px;" data-feidao-actions="click:eu-001">
				</td>
			</tr>
			<tr>
				<td>解除搜索</td>
				<td>clear_search</td>
				<td></td>
				<td>
					<input type="button" style="width: 200px;" value="解除搜索" style="margin:10px;" data-feidao-actions="click:eu-004">
				</td>
			</tr>
			<tr>
				<td>折叠全部</td>
				<td>close_all</td>
				<td></td>
				<td>
					<input type="button" style="width: 200px;" value="折叠全部" style="margin:10px;" data-feidao-actions="click:eu-005">
				</td>
			</tr>
			<tr>
				<td>打开全部</td>
				<td>open_all</td>
				<td></td>
				<td>
					<input type="button" style="width: 200px;" value="打开全部" style="margin:10px;" data-feidao-actions="click:eu-006">
				</td>
			</tr>
			<tr>
				<td>打开某个节点</td>
				<td>open</td>
				<td></td>
				<td>
					<input type="text" style="width: 100px;" style="margin:10px;" placeholder="打开某个节点" data-feidao-id="open-id">
					<input type="button" style="width: 200px;" value="打开某个节点" style="margin:10px;" data-feidao-actions="click:eu-015">
				</td>
			</tr>
			<tr>
				<td>折叠某个节点</td>
				<td>close</td>
				<td></td>
				<td>
					<input type="text" style="width: 100px;" style="margin:10px;" placeholder="折叠某个节点" data-feidao-id="close-id">
					<input type="button" style="width: 200px;" value="折叠某个" style="margin:10px;" data-feidao-actions="click:eu-007">
				</td>
			</tr>
			<tr>
				<td>获取选中的数据</td>
				<td>get_checked</td>
				<td>必须设置属性"复选框"</td>
				<td>
					<input type="button" style="width: 200px;" value="获取选中的数据" style="margin:10px;" data-feidao-actions="click:eu-008">
				</td>
			</tr>
			<tr>
				<td>全部选中</td>
				<td>check_all</td>
				<td>必须设置属性"复选框"</td>
				<td>
					<input type="button" style="width: 200px;" value="全部选中" style="margin:10px;" data-feidao-actions="click:eu-009">
				</td>
			</tr>
			<tr>
				<td>全部不选</td>
				<td>uncheck_all
			</td>
				<td>必须设置属性"复选框"</td>
				<td>
					<input type="button" style="width: 200px;" value="全部不选" style="margin:10px;" data-feidao-actions="click:eu-010">
				</td>
			</tr>
			<tr>
				<td>选中一个或多个节点</td>
				<td>check_node</td>
				<td>必须设置属性"复选框"</td>
				<td>
					<input type="text" style="width: 100px;" style="margin:10px;" placeholder="多个使用,分隔" data-feidao-id="check-id">
					<input type="button" style="width: 200px;" value="选中一个或多个节点" style="margin:10px;" data-feidao-actions="click:eu-011">
				</td>
			</tr>
			<tr>
				<td>通过id获取数据</td>
				<td>get_data_by_id</td>
				<td></td>
				<td>
					<input type="text" style="width: 100px;" style="margin:10px;" placeholder="获取数据id" data-feidao-id="get-id">
					<input type="button" style="width: 200px;" value="通过id获取数据" style="margin:10px;" data-feidao-actions="click:eu-012">
				</td>
			</tr>
			<tr>
				<td>通过节点id获取节点对象</td>
				<td>get_node_by_id</td>
				<td></td>
				<td>
					<input type="text" style="width: 100px;" style="margin:10px;" placeholder="获取节点id" data-feidao-id="node-id">
					<input type="button" style="width: 200px;" value="通过节点id获取节点对象" style="margin:10px;" data-feidao-actions="click:eu-013">
				</td>
			</tr>
		</tbody>
	</table>

</div>
</div>
<div>
<span style="font-size: 25px;">控件事件</span>
</div>
<div>
<span style="font-size: 18px;">控件内所有的用户操作不需在组件中绑定事件，应是组件获取控件的内容或属性。获取方式有两种：一、通过调用控件的方法；二、控件向外抛出事件</span>
</div>
<div>
控件抛出的事件有两个：fdwe-tree-select-node，fdwe-tree-activate-node
<table style="margin: 20px 0 20px 0; width:800px;">
<tr><td>fdwe-tree-select-node</td><td>节点被选中时抛出</td><td>在设置保持状态后此事件会在控件初始化时就抛出</td></tr>
<tr><td>fdwe-tree-activate-node</td><td>点击节点时抛出</td><td>只有在用户点击节点时抛出</td></tr>
</table>

<span>事件抛出的内容如下所示，内容为组件相应函数中的args参数</span>
<textarea cols=60 rows=5 data-feidao-id="fd-w000001-003"></textarea>
<textarea cols=60 rows=5 data-feidao-id="fd-w000001-004"></textarea>
</div>
`;
